{extend name="common/base" /}
<!--title-->
{block name="titlekeyword"}
<title>{$content}</title>

{/block}
<!--下面 每个页面的特色css-->
{block name="titleStyle"}
<style type="text/css">
	div,
	span {
		width: 140px;
		height: 140px;
		margin: 20px;
		background: #9999CC;
		border: #000 1px solid;
		float: left;
		font-size: 17px;
		font-family: Roman;
	}

	div.mini {
		width: 30px;
		height: 30px;
		background: #CC66FF;
		border: #000 1px solid;
		font-size: 12px;
		font-family: Roman;
	}
</style>


{/block}
<!--代码主要内容-->
{block name="main"}
<h6>内容</h6>
<ul id="city">
	<li id="bj" name="beijing">北京</li>
	<li id="sh" name="shanghai">上海</li>
	<li id="jl" name="jilin">吉林</li>
	<li id="my" name="mianyang">绵阳</li>
</ul>

<input type="button" id="b1" value="添加重庆li到 上海下 jquery 1 方法" />
<br/>
<input type="button" id="b6" value="添加重庆li到 上海下 jquery 1 方法" />
<br/>
<input type="button" id="b2" value="添加成都li到 北京前" />
<br/>
<input type="button" id="b3" onclick="test1()" value="添加重庆li到 上海下(使用dom的传统方法)"/>
<br/>
<input type="button" id="b4" value="添加成都li到 北京和重庆之间" />
<br/>

<input type="button" id="b5" value="添加成都li到 吉林前面" />
<br/>
<h6>代码</h6>
<pre>
		&lt;ul id="city"&gt;
		&lt;li id="bj" name="beijing"&gt;北京&lt;/li&gt;
		&lt;li id="sh" name="shanghai"&gt;上海&lt;/li&gt;
		&lt;li id="jl" name="jilin"&gt;吉林&lt;/li&gt;
		&lt;li id="my" name="mianyang"&gt;绵阳&lt;/li&gt;
	&lt;/ul&gt;
	
	&lt;input type="button" id="b1" value="添加重庆li到 上海下 jquery 1 方法" /&gt;
	&lt;br/&gt;
	&lt;input type="button" id="b6" value="添加重庆li到 上海下 jquery 1 方法" /&gt;
	&lt;br/&gt;
	&lt;input type="button" id="b2" value="添加成都li到 北京前" /&gt;
	&lt;br/&gt;
	&lt;input type="button" id="b3" onclick="test1()" value="添加重庆li到 上海下(使用dom的传统方法)"/&gt;
	&lt;br/&gt;
	&lt;input type="button" id="b4" value="添加成都li到 北京和重庆之间" /&gt;
	&lt;br/&gt;
	
	&lt;input type="button" id="b5" value="添加成都li到 吉林前面" /&gt;
	&lt;br/&gt;
	
	js
	&lt;script language="javascript"&gt;
	
			//*****添加重庆li到 上海下
			$("#b1").click(function () {
				//jquery方法
				$myli = $("&lt;li id='cq' name='chongqing'&gt;重庆&lt;/li&gt;");
				//先使用内部插入
				$('#city').append($myli)  // 表示 在 $('#city')对象内部后面添加一个 $myli对象
			})
			$("#b6").click(function () {
				$myli = $("&lt;li&gt;&lt;/li&gt;");//&lt;===&gt;$myli=$("&lt;li/&gt;");
				$myli.text("重庆2"); //=&gt; &lt;li&gt;重庆&lt;/li&gt;
				$myli.attr("id", "cq");//==&gt;&lt;li id='cq'&gt;重庆&lt;/li&gt;
				$myli.attr("name", "chongqing");
				//把$myli添加到上海
				////$('#city').append($myli) :表示 在 $('#city')对象内部后面添加一个 $myli对象
				//$('#city').append($myli);
				//如果使用appendTo这应当这样使用
				//$myli.appendTo($("#city")); :表示把$myli添加到  $("#city")对象的内部后面
				$myli.appendTo($("#city"));
			})
			//***添加成都li到 北京前
			$("#b2").click(function () {
				//jqury方法
				$myli = $("&lt;li id='cq' name='chongqing'&gt;成都&lt;/li&gt;");
				//$('#city').prepend($myli);
				$myli.prependTo($('#city'));
			})
	
			//添加重庆li到 上海下(使用dom的传统方法)
			function test1() {
	
				var myli = document.createElement("li");
				myli.setAttribute("id", "cq");
				myli.setAttribute("name", "chongqing");
				myli.innerHTML = "重庆";
	
				document.getElementById("city").appendChild(myli);
	
			}
	
			$('#b4').click(function () {
	
				//使用外部插入
				//一步到位
				//$("#bj").after("&lt;li id='cd' name='chengdu '&gt;成都&lt;/li&gt;");
				$("&lt;li id='cd' name='chengdu '&gt;成都&lt;/li&gt;").insertAfter($('#bj'));
	
			})
	
			$('#b5').click(function () {
	
				//使用外部插入
				//一步到位
				//$("#jl") 对象前面添加  "&lt;li id='cd' name='chengdu '&gt;成都&lt;/li&gt;";
				var $jl = $("&lt;li id='cd' name='chengdu '&gt;成都&lt;/li&gt;");
				//$("#jl").before($jl);
				$jl.insertBefore($('#jl'));
	
			})
	
		
	&lt;/script&gt;

	 </pre> {/block}
<!--底部js 在这里是js的实际代码区-->
{block name="footjs"}
<script language="javascript">

		//*****添加重庆li到 上海下
		$("#b1").click(function () {
			//jquery方法
			$myli = $("<li id='cq' name='chongqing'>重庆</li>");
			//先使用内部插入
			$('#city').append($myli)  // 表示 在 $('#city')对象内部后面添加一个 $myli对象
		})
		$("#b6").click(function () {
			$myli = $("<li></li>");//<===>$myli=$("<li/>");
			$myli.text("重庆2"); //=> <li>重庆</li>
			$myli.attr("id", "cq");//==><li id='cq'>重庆</li>
			$myli.attr("name", "chongqing");
			//把$myli添加到上海
			////$('#city').append($myli) :表示 在 $('#city')对象内部后面添加一个 $myli对象
			//$('#city').append($myli);
			//如果使用appendTo这应当这样使用
			//$myli.appendTo($("#city")); :表示把$myli添加到  $("#city")对象的内部后面
			$myli.appendTo($("#city"));
		})
		//***添加成都li到 北京前
		$("#b2").click(function () {
			//jqury方法
			$myli = $("<li id='cq' name='chongqing'>成都</li>");
			//$('#city').prepend($myli);
			$myli.prependTo($('#city'));
		})

		//添加重庆li到 上海下(使用dom的传统方法)
		function test1() {

			var myli = document.createElement("li");
			myli.setAttribute("id", "cq");
			myli.setAttribute("name", "chongqing");
			myli.innerHTML = "重庆";

			document.getElementById("city").appendChild(myli);

		}

		$('#b4').click(function () {

			//使用外部插入
			//一步到位
			//$("#bj").after("<li id='cd' name='chengdu '>成都</li>");
			$("<li id='cd' name='chengdu '>成都</li>").insertAfter($('#bj'));

		})

		$('#b5').click(function () {

			//使用外部插入
			//一步到位
			//$("#jl") 对象前面添加  "<li id='cd' name='chengdu '>成都</li>";
			var $jl = $("<li id='cd' name='chengdu '>成都</li>");
			//$("#jl").before($jl);
			$jl.insertBefore($('#jl'));

		})

	
</script> {/block}